<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<body>
<div id="app">
    <div class="add">
        编号:<input type="text" v-model="code">
        品牌名称:<input type="text" v-model="productsName">
        <br>
        图片地址:<input type="text" v-model="imgurl">
        价格:<input type="text" v-model="price">
        <input type="button" value="添加" @click="add">
    </div>
    <div>
        <table class="tb">
            <tr>
                <th>
                    <input type="checkbox" name="" id="">
                </th>
                <th>产品图片</th>
                <th>品牌名称</th>
                <th>编号</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in products" :key="item.id">
                <td>
                    <input type="checkbox" name="" id="">
                </td>
                <td>
                    <img width="50" height="50" :src="item.imgurl" alt="">
                </td>
                <td>{{item.productsName}}</td>
                <td>{{item.code}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button>-</button>
                    &nbsp;
                    <b>{{item.quantity}}</b>
                    &nbsp;
                    <button>+</button>
                </td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan="7" v-show="products.length===0">没有品牌数据</td>
            </tr>
            <!-- 动态生成内容tr -->
        </table>
    </div>
</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //1.根据数据,展示列表

    //2.增加数据,并且展示,核心思路就是,获取输入框的值,然后组合成一个对象,push到products这个数组

    //3.删除数据,并且展示

    //4.没有数据的时候,显示没有个更多数据了

    let vm = new Vue({
        methods: {
            //删除数据
            del(i) {
                //只需要从数组中移除掉一项,那么视图层自然就会被删除
                console.log(i)
                this.products.splice(i, 1)
            },
            add() {
                //将输入框输入的内容组合成一个对象push到products这个数组中
                let obj = {
                    //随机生成id
                    id: Math.random().toString(16).substring(2).toUpperCase(),
                    code: this.code,
                    productsName: this.productsName,
                    price: this.price,
                    imgurl: this.imgurl,
                    quantity: 1
                }

                //push到products这个数组

                this.products.push(obj)
            }
        },
        el: "#app",
        data: {
            productsName: "",
            code: "",
            imgurl: "",
            price: "",
            products: [
                {
                    id: 1,
                    productsName: '黄瓜🥒',
                    imgurl: "",
                    price: 10,
                    code: 1,
                    quantity: 99
                },
                {
                    id: 2,
                    productsName: '胡萝卜🥕',
                    imgurl: "",
                    price: 20,
                    code: 2,
                    quantity: 50
                },
            ]
        }
    });
</script>